<template>
  <div class="page-min">
    <el-row>
      <el-col style="width:1000px">
           <div class="list-view-box">
             <div class="item" v-for="(item,index) in totalList" :key="index">
                 <i :style="{color:item.color}" :class="item.icon" />
                 <div class="name">{{item.text}}</div>
                 <div class="number">{{item.total}}</div>
             </div>
           </div>
           <div class="echarts-view">
              <div id="main" style="width:600px;height:400px;margin-top:20px"></div>
              <div style="width:400px;height:400px"></div>
           </div>
            <div>
              <div id="weekId" style="width:100%;height:400px;"></div>
            </div>
            <div class="echarts-view">
              <div  style="width:480px;height:400px">
                <div class="max-titel">安检隐患客户处理情况：</div>
                <div class="user-list">
                   <div class="item" v-for="item in 5" :key="item">
                       <div class="xingming">李</div>
                       <div class="name">张三</div>
                       <div class="address">客户地址:</div>
                       <div class="address">联系电话：13233223322</div>
                       <div class="btn-view">
                          <div class="btn">已处理</div>
                          <div class="time">2012-02-01</div>
                       </div>
                   </div>
                </div>

              </div>
               <div style="width:480px;height:400px;margin-left:10px">
                  <div class="max-titel">各小区安检完成情况：</div>
                <el-table
                :data="[]"
                border
                :header-cell-style="{background:'#F0F1F6',color:'#333'}"
                style="width: 480px;">
                <el-table-column         
                    prop="name" 
                     align="center"
                    label="小区名称"
                   />
                 <el-table-column         
                    prop="name" 
                     align="center"
                    label="安检总户数"
                   />
                    <el-table-column         
                    prop="name" 
                     align="center"
                    label="已安检"
                   />
                   <el-table-column         
                    prop="name" 
                     align="center"
                    label="安检率"
                   />
            </el-table>
               </div>
           </div>
      </el-col>
      <el-col style="width:600px">
         <div class="max-titel">安检员任务情况：</div>
                <el-table
                :data="cusStaffTaskList"
                border
                :header-cell-style="{background:'#F0F1F6',color:'#333'}"
                style="width: 600px;">
                <el-table-column         
                    prop="staffName" 
                     align="center"
                    label="姓名"
                   />
                 <el-table-column         
                    prop="position" 
                     align="center"
                    label="身份"
                   />
                    <el-table-column         
                    prop="checkedNum" 
                     align="center"
                    label="完成安检量"
                   />
            </el-table>
            <div class="max-titel">安检隐患客户处理情况：</div>
                <div class="user-list">
                   <div class="item" v-for="item in 5" :key="item">
                       <div class="xingming">李</div>
                       <div class="name">张三</div>
                       <div class="address">客户地址:</div>
                       <div class="address">联系电话：13233223322</div>
                       <div class="btn-view">
                          <div class="btn">已处理</div>
                          <div class="time">2012-02-01</div>
                       </div>
                   </div>
                </div>

           <div class="max-titel">各小区安检评论情况占比：</div>
            <el-table
                :data="[]"
                border
                :header-cell-style="{background:'#F0F1F6',color:'#333'}"
                style="width: 600px;">
                <el-table-column         
                    prop="name" 
                     align="center"
                    label="小区名称"
                   />
                   
                 <el-table-column         
                    prop="name" 
                     align="center"
                    label="非常满意"
                   />
                    <el-table-column         
                    prop="name" 
                     align="center"
                    label="满意"
                   />
                    <el-table-column         
                    prop="name" 
                     align="center"
                    label="一般"
                   />
                    <el-table-column         
                    prop="name" 
                     align="center"
                    label="还行"
                   />
                    <el-table-column         
                    prop="name" 
                     align="center"
                    label="不满意"
                   />
            </el-table>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import  {
  findCusSecurityCheckAnalysis,
  findCusStaffTask,}  from '@/api/user'
import * as echarts from 'echarts';
export default {
  components:{
  },
  data() {
    return {
       totalList:[
         {text:'本期安检客户总数',icon:'el-icon-user',color:'#8ec9fb',total:'0',key:'doorNoTotalNum'},
         {text:'新增点火客户',icon:'el-icon-s-check',color:'#2c93ea',total:'0',key:'newDoorNoNum'},
         {text:'进行中的安检计划',icon:'el-icon-tickets',color:'#2c93ea',total:'0',key:'ongoingPlanNum'},
         {text:'已结束安检计划',icon:'el-icon-files',color:'#2c93ea',total:'0',key:'overPlanNum'},
         {text:'安检完成率',icon:'el-icon-pie-chart',color:'#2c93ea',total:'0',key:'securityCheckRate'}
        ],
        cusStaffTaskList:[]
    }
  },
  created(){

  },
  mounted(){
    this.getTopTotal()
    this.findCusStaffTask()
     this.setPei()
     this.getInit()
  },
  methods: {
    getTopTotal(){
     findCusSecurityCheckAnalysis().then((res)=>{
       if(res.code==0){
         this.totalList.map((item)=>{
           if(res.data[item.key]){
             item.value =res.data[item.key]
           }
           return item
         })
       }
     })
    },
    findCusStaffTask(){
     findCusStaffTask({page:1,pageSize:10,data:{}}).then((res)=>{
       if(res.code==0){
         this.cusStaffTaskList=res.data
       }
     })
    },
    setPei(){
      var chartDom = document.getElementById('main');
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        title: {
          text: '本期安检',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 1048, name: '到访不遇及拒绝入户数' },
              { value: 735, name: '存在隐患数' },
              { value: 580, name: '未完成安检数' },
              { value: 484, name: '完成安检数' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      option && myChart.setOption(option);
    },
   getInit(){
      
      var chartDom = document.getElementById('weekId');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
         title: {
          text: '近7日安检情况',
          left: 'left'
        },
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: 'line'
          }
        ]
      };
      option && myChart.setOption(option);
   }
  }
}
</script>

<style lang="scss" scoped>
.page-min{
    margin: 10px;
    background-color: #fff;
    border:1px solid #ddd;
    border-radius:4px;
    padding:10px 50px 10px 10px;
}
.list-view-box{
  display: flex;
  justify-content: center;
  .item{
    width:270px;
    height:160px;
    box-shadow: 0px 6px 10px rgb(242 242 242);
    position: relative;
    padding-left: 60px;
    padding-top:50px;
    i{
      position: absolute;
      font-size: 44px;
      top: 50%;
      height: 50px;
      line-height: 50px;
      margin-top: -25px;
      left:10px;
    }
    .name{
      font-size:16px;
      color:#999;
    }
    .number{
      font-size:24px;
      color:#333;
      padding-top:10px;
    }
  }
}
.echarts-view{
  display: flex;
}
.user-list{
  height:500px;
  overflow-y: scroll;
   .item{
     position: relative;
     border-bottom:1px solid #ddd;
     padding:10px;
     padding-left:100px;
     .xingming{
       height:70px;
       width:70px;
       border-radius:70px;
       background-color: rgba(142, 201, 251, 1);
       color:#fff;
       line-height:70px;
       position: absolute;
       top:50%;
       margin-top:-35px;
       left:10px;
       text-align: center;
       font-size:18px;
     }
     .name{
       font-size:16px;
       color:#333;
     }
     .address{
       color:#999;
       font-size:15px;
       padding-top:10px;
     }
     .btn-view{
       display: flex;
       justify-content: space-between;
       align-items: center;
       margin-top:10px;
       .btn{
         border-radius:4px;
         height:30px;
         line-height:30px;
         text-align: center;
         background-color: rgba(255, 199, 28, 1);
         color:#fff;
         width:80px;
         font-size:13px;
         cursor: pointer;
       }
       .time{
         font-size:14px;
         color:#999;
       }
     }
   }
}
.max-titel{
  font-size:18px;
  padding:10px 0;
  color:#333;
}
</style>